import React from 'react';
import { messages } from 'share/common';
import { Checkbox, Col, Input, Row, Select } from 'antd';
import WrapFormItem from 'components/wrap-form-item';
import partner from 'containers/pay/template/partner';
import MultiSelectorV2 from 'components/template/multi-selector'

const { Option } = Select;

const origHasValue = value => value && (value.existsOrigDocumentSequence === false || value.origDocumentSequence);
const partnerHasValue = value => value && value.partnerCategory;
const labelIdsHasValue = value => value && value.labelIds && value.labelIds[0];

const onChangeCheckbox = (value, onChange) => {
  onChange({ existsOrigDocumentSequence: value, origDocumentSequence: '' });
};

const onChangeType = (value, innerValue, onChange) => {
  value.labelContains = innerValue;
  onChange(value);
};

export const origDocument = {
  id: 'origDocument',
  label: messages('expense-1.key601')/*凭证编号*/,
  component: <WrapFormItem parser={value => value || {}}>
    {(onChange, value) => (
      <Row>
        <Col span={16}>
          <Input
            disabled={value.existsOrigDocumentSequence === false}
            value={value.origDocumentSequence}
            onChange={e => onChange({
              origDocumentSequence: e.target.value,
              existsOrigDocumentSequence: true
            })}
          />
        </Col>
        <Col span={7} offset={1} className="null-batch-num">
          <Checkbox
            checked={value.existsOrigDocumentSequence === false}
            onChange={e => onChangeCheckbox(!e.target.checked, onChange)}
          />
          &nbsp;{messages('expense-1.key602')/*为空*/}
        </Col>
      </Row>
    )}
  </WrapFormItem>,
  hasValue: origHasValue,
  parser: value => origHasValue(value)
    ? {
      existsOrigDocumentSequence: value.existsOrigDocumentSequence,
      origDocumentSequence: value.origDocumentSequence
    }
    : null,
  tagParser: ({  origDocumentSequence }) =>
    !origDocumentSequence ? messages('expense-1.key602')/*为空*/ : origDocumentSequence
};


export const expensePartner = {
  ...partner,
  parser: value => partnerHasValue(value)
    ? {
      partnerCategory: value.partnerCategory.code,
      partnerId: value.partnerId ? value.partnerId[0].id : null
    }
    : null
};


export function labelIds(labelCategory = 1) {return {
  id: 'labelIds',
  label: messages('expense-1.key603')/*单据标签*/,/*单据标签*/
  component: <WrapFormItem parser={value => value || {}}>
    {(onChange, value) => (
      <Row gutter={10}>
        <Col span={10}>
          <Select
            style={{width:'100%'}}
            single
            value={value.labelContains}
            dropdownMatchSelectWidth={false}
            placeholder={messages('expense-1.key604')/*请选择temp*/}
            onChange={innerValue => onChangeType(value, innerValue, onChange)}
          >
            <Option value="2">{messages('expense-1.key605')/*包含*/}</Option>
            <Option value="1">{messages('expense-1.key606')/*不包含*/}</Option>
          </Select>
        </Col>
        <Col span={14} style={{ height: 32 }}>
          <MultiSelectorV2
            type='expense_label'
            disabled={!value.labelContains}
            params={{ labelCategory }}
            onChange={innerValue => onChange({ labelIds: innerValue })}
            value={value.labelIds}
          />
        </Col>
      </Row>
    )}
  </WrapFormItem>,
  hasValue: labelIdsHasValue,
  parser: value => labelIdsHasValue(value) ? {
    labelContains: value.labelContains === "2",
    labelIds: value.labelIds ? value.labelIds.map(item => item.id) : null
  } : null,
  tagParser: ({ labelIds = [], labelContains }) => {
    if (labelIds[0]) {
      const message = labelContains === '2' ? messages('expense-1.key605')/*包含*/ : messages('expense-1.key606')/*不包含*/;
      return `${message}：${labelIds.map(item => item.name).join('，')}`;
    } else {
      return null;
    }
  },
  initialValue:{
    labelContains: '2'
  }
}}

